<template>
  <div class="articles">
    <!-- 搜索 -->
    <div class="nav">
      <div class="nav_box">
        <router-link to="/home/index" class="router-link-active"
          >首页</router-link
        >
        <el-icon color="#999">
          <DArrowRight />
        </el-icon>
        <router-link to="/home/article" class="router-link-active"
          >党员充电站</router-link
        >
        <el-icon color="#999">
          <DArrowRight />
        </el-icon>
        <router-link to="/home/articles" class="router-link-active"
          >文章详情</router-link
        >
      </div>
    </div>
    <!-- 内容 -->
    <div class="con">
      <div class="c_top">
        <div class="title">{{ data.title }}</div>
        <div class="time" v-if="hand">
          <div class="aa">倒计时:</div>
          <el-countdown
            format="mm:ss"
            value-style="font-size: 14px; color: #e02020;"
            :value="value"
            @finish="handleEnd"
          />
        </div>
        <div class="jf" v-if="hand1">+{{ jf }}</div>
      </div>
      <div class="time1">
        <div class="aa">{{ data.create_time }}</div>
        <div class="bb">浏览量：{{ data.views }}</div>
      </div>
      <!-- <div class="p_con">
        <div class="ter">
          <div class="text">
            公众号资源文章正文，公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正号资源文章正文公众号资源号资源文章正文公众号资源号资源文章正文公众号资源号资源文章正文公众号资源号资源文章正文公众号资源号资源文章正文公众号资源
          </div>
        </div>
        <img src="" alt="" />
        <div class="ter">
          公众号资源文章正文，公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正...公众号资源文章正文，公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正...公众号资源文章正文，公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正...公众号资源文章正文，公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正...公众号资源文章正文，公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正...公众号资源文章正文，公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正...公众号资源文章正文，公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正...公众号资源文章正文，公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正...公众号资源文章正文，公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正...公众号资源文章正文，公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正...公众号资源文章正文，公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正文公众号资源文章正...
        </div>
      </div> -->
      <div class="fwb">
        <dev v-html="data.content"> </dev>
      </div>
      <!-- 评论 -->
      <div class="comment">
        <div class="com_top">共{{ total }}条评论</div>
        <div class="br"></div>
        <div class="com_item" v-for="(item, i) in sourcedata" :key="item.id">
          <img :src="item.user_avatar" alt="" v-if="i <= zk - 1" />
          <div class="item_con" v-if="i <= zk - 1">
            <div class="nam">{{ item.user_nickname }}</div>
            <div class="xx">
              <div class="text">
                {{ item.content }}
              </div>
            </div>
            <div class="tim">
              <div class="ti">{{ item.create_time }}</div>
              <div
                class="del"
                style="cursor: pointer"
                @click="del(item.id)"
                v-if="item.user_id == ids"
              >
                删除
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 展开 -->
      <div class="unfold">
        <div class="my" v-if="sfzk">
          <el-icon>
            <ArrowDown />
          </el-icon>
          <span style="cursor: pointer" @click="zkclick">展开</span>
        </div>
      </div>
      <div class="br"></div>
      <div class="footer">
        <img :src="avatar" alt="" />
        <div class="inp">
          <el-input
            v-model="comment.content"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="发布一下你的评论吧！"
          />
          <div class="btn" style="cursor: pointer" @click="getcomment">
            发布
          </div>
        </div>
      </div>
      <div class="aaa"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  getnetworkApi2,
  getsourceApi,
  getpointApi,
  getcommentApi,
  getcommentdelApi,
  deptPoint
} from '@/api/user'

const router = useRouter()
// 倒计时
const value = ref(Date.now() + 5 * 60 * 1000)
// 倒计时结束
const id = ref(router.currentRoute.value.query.id)
const data = ref({
  create_time: '',
  views: '',
  title: '',
  content: ''
})
getnetworkApi2(id.value).then(res => {
  data.value = res.data.data
  value.value = Date.now() + res.data.data.seconds * 1000
  if (res.data.data.point_status == 1) {
    hand.value = false
  }
  console.log('详情', data.value)
})
const hand = ref(true)
const hand1 = ref(false)
function handleEnd() {
  hand.value = false
  getpoint()
  // console.log('倒计时结束')
}
// 评论
const source: any = ref({
  source: 1,
  id: 1,
  self: 0
})
const sourcedata = ref([
  {
    content: '',
    create_time: '',
    id: 5,
    user_avatar: '',
    user_nickname: '',
    user_id: ''
  }
])
const zk = ref(2)
const sfzk = ref(true)
const total = ref(0)
const getsource = () => {
  source.value.id = id.value
  getsourceApi(source.value).then(res => {
    sourcedata.value = res.data.data.data
    total.value = res.data.data.total
    if (total.value <= 2) {
      zk.value = total.value
      sfzk.value = false
    }
    if (sfzk.value) {
      zk.value = 2
    } else {
      zk.value = total.value
    }
    console.log('评论列表', res)
  })
}
getsource()
const zkclick = () => {
  zk.value = total.value
  sfzk.value = false
}
const point: any = ref({
  source: 3,
  source_id: 1
})
const jf = ref()
const getpoint = () => {
  point.value.source_id = id.value
  getpointApi(point.value).then(res => {
    jf.value = res.data.data.point
    // ElMessage({ message: res.data.msg, type: 'success' })
    if (res.data.msg == '不可重复获得积分') {
      hand1.value = false
    } else {
      hand1.value = true
    }
  })
}
const comment: any = ref({
  source: 1,
  id: 1,
  content: ''
})
const getcomment = () => {
  comment.value.id = id.value
  console.log(id.value)

  getcommentApi(comment.value).then(res => {
    // console.log('评论', res)
    ElMessage({
      message: res.data.msg,
      type: 'success'
    })
    comment.value.content = ''
    getsource()
  })
}
const del = (id: any) => {
  getcommentdelApi({ id: id }).then(res => {
    // console.log('删除评论', res, id)
    ElMessage({
      message: res.data.msg,
      type: 'success'
    })
    getsource()
  })
}
const avatar = ref()
const ids: any = ref()
deptPoint().then(res => {
  console.log(res.data.data, 'aaaa')
  ids.value = res.data.data.id
  avatar.value = res.data.data.avatar
})
</script>

<style lang="scss" scoped>
.fwb {
  padding: 48px;
}

.articles {
  width: 1080px;
  margin: 0 auto;
  background-color: #f5f5f5;
}

.con {
  width: 1048px;
  margin-left: 16px;
  background-color: #fff;

  .aaa {
    height: 50px;
  }

  .footer {
    margin-top: 10px;
    padding: 0 48px;
    display: flex;

    .inp {
      position: relative;
      width: 917px;
      border-radius: 2px;

      .btn {
        position: absolute;
        width: 60px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        border-radius: 2px;
        /* 党建主色 */
        background: #e02020;
        font-size: 14px;
        color: #ffffff;
        bottom: 3px;
        right: 3px;
      }
    }

    img {
      width: 30px;
      height: 30px;
      margin-right: 7px;
      border-radius: 50%;
      background-color: blue;
    }
  }

  .unfold {
    display: flex;
    justify-content: center;

    .my {
      margin-top: 13px;
      color: #999999;
      margin-bottom: 19px;

      .el-icon {
        margin-right: 3px;
      }
    }
  }

  .comment {
    .com_item {
      display: flex;
      padding: 0 48px;

      .item_con {
        margin-top: 25px;

        .tim {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          font-weight: normal;
          color: #767676;

          .del {
            font-size: 12px;
            font-weight: normal;
            color: #e02020;
          }
        }

        .xx {
          margin: 2px 0 8px 0;
          font-size: 14px;
          font-weight: normal;
          color: #1a1a1a;
          font-size: 12px;
          color: #999999;
          // overflow: hidden; /* 隐藏溢出内容 */
          // text-overflow: ellipsis; /* 当文本溢出时，使用省略号表示 */
          width: 914px;
          /* 定义容器宽度 */
          // .text {
          //   display: -webkit-box; /* 启用弹性盒子布局 */
          //   -webkit-line-clamp: 2; /* 限制显示2行文本 */
          //   -webkit-box-orient: vertical; /* 垂直方向排列子元素 */
          //   overflow: hidden; /* 隐藏溢出内容 */
          //   text-overflow: ellipsis; /* 当文本溢出时，使用省略号表示 */
          // }
        }

        .nam {
          font-size: 12px;
          font-weight: 600;
          color: #1a1a1a;
        }
      }

      img {
        width: 30px;
        height: 30px;
        margin: 24px 8px 0 0;
        border-radius: 50%;
        background-color: blue;
      }
    }

    .com_top {
      padding: 0 48px;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      color: #1a1a1a;
      margin-top: 37px;
      margin-bottom: 20px;
    }
  }

  .p_con {
    font-size: 14px;
    color: #1a1a1a;
    padding: 0px 48px;

    .ter {
      font-size: 12px;
      color: #999999;
      overflow: hidden;
      /* 隐藏溢出内容 */
      text-overflow: ellipsis;
      /* 当文本溢出时，使用省略号表示 */
      width: 952px;

      /* 定义容器宽度 */
      .text {
        display: -webkit-box;
        /* 启用弹性盒子布局 */
        -webkit-line-clamp: 2;
        /* 限制显示2行文本 */
        -webkit-box-orient: vertical;
        /* 垂直方向排列子元素 */
        overflow: hidden;
        /* 隐藏溢出内容 */
        text-overflow: ellipsis;
        /* 当文本溢出时，使用省略号表示 */
      }
    }

    img {
      width: 952px;
      height: 452px;
      margin: 17px 0;
      background-color: blue;
    }
  }

  .time1 {
    display: flex;
    margin: 13px 0 33px 48px;
    font-size: 14px;
    color: #767676;

    .bb {
      margin-left: 99px;
    }
  }

  .c_top {
    display: flex;
    justify-content: space-between;
    padding: 37px 48px 0px;

    .title {
      font-size: 22px;
      font-weight: 600;
      color: #1a1a1a;
    }

    .jf {
      width: 128px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      border-radius: 18px;
      background: #ffffff;
      // box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
      font-size: 22px;
      font-weight: 600;
      color: #e02020;
    }

    .time {
      display: flex;
      width: 128px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      border-radius: 18px;
      background: #ffffff;
      // box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
      font-size: 14px;
      font-weight: 600;
      color: #e02020;

      .aa {
        margin-left: 5px;
      }

      .el-statistic {
        margin-top: -2px;
        margin-left: 5px;
      }
    }
  }
}

.nav {
  height: 54px;
  line-height: 54px;
  background-color: #fff;
  margin-bottom: 16px;

  .nav_box {
    display: flex;
    align-items: center;
    margin-left: 44px;
    font-size: 16px;
    color: #999999;

    .router-link-active {
      font-size: 16px;
      color: #999999 !important;
      text-decoration: none;
    }

    .el-icon {
      margin: 0 10px 0 10px;
    }
  }
}

.br {
  margin-left: 48px;
  width: 952px;
  border-bottom: 1px solid #e5e5e5;
}
</style>
